<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import slVehicleViolation from './components/vehicle-violation'
import slVehicleBreakdown from './components/vehicle-breakdown'
import slVehicleAccident from './components/vehicle-accident'

import { recordApi } from '@/apis/task.js'
import { useTaskStore } from '@/stores/task.js'
const taskStores = useTaskStore()
// 回车时间
const dataTimePicker = ref('')
//获取 路由参数
onLoad(({ planArrivalTime, id }) => {
	console.log('回车登记', id, planArrivalTime)
	taskStores.recordData.startTime = planArrivalTime
	taskStores.recordData.id = id
})

//提交回车登记
const submit = async () => {
	taskStores.recordData.endTime = dataTimePicker.value
	console.log('提交表单')
	console.log(taskStores.recordData)
	await recordApi(taskStores.recordData)
	//提示用户
	setTimeout(() => {
		uni.showToast({
			title: '回车登记成功'
		})
	}, 1000)
	//跳转到首页
	uni.reLaunch({
		url: '/pages/task/index'
	})
}
</script>
<template>
	<view class="page-container">
		<scroll-view class="scroll-view" scroll-y>
			<view class="scroll-view-wrapper">
				<uni-list class="base-info">
					<uni-list-item title="出车时间" show-arrow :right-text="taskStores.recordData.startTime" />
					<uni-list-item show-arrow title="回车时间">
						<template v-slot:footer>
							<uni-datetime-picker v-model="dataTimePicker">
								<view class="picker-value">{{ dataTimePicker || '请选择' }}</view>
							</uni-datetime-picker>
						</template>
					</uni-list-item>
				</uni-list>
				<sl-vehicle-violation></sl-vehicle-violation>
				<sl-vehicle-breakdown></sl-vehicle-breakdown>
				<sl-vehicle-accident></sl-vehicle-accident>
			</view>
		</scroll-view>
		<view class="toolbar">
			<button class="button" @click="submit">提交登记</button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>